import React from 'react';
import { Form, Input, Button, Checkbox, Layout, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import css from './index.module.less';
import { login } from '../../api/login';

export default function Login() {
    const navigate = useNavigate();
    const onFinish = (values) => {
    	const { username, password } = values;
    	const data = {
    		username: username,
				password: password
    	};
			login(data).then((res) => {
				if (res.code === 200) {
					sessionStorage.setItem('info', JSON.stringify(res.data));
					navigate("/");
					message.success("登录成功");
				} else {
					message.error(res.message);
				}
			})
    };

    return (
        <Layout className={css.login}>
            <div className={css.main}>
                <h1>个人博客系统</h1>
                <p>用户登录</p>
                <Form
                    name="basic"
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入你的账号!' }]}
                    >
                        <Input placeholder="账号" />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入你的密码!' }]}
                    >
                        <Input.Password placeholder="密码" />
                    </Form.Item>

                    <Form.Item name="remember" valuePropName="checked">
                        <Checkbox>自动登录</Checkbox>
                    </Form.Item>

                    <div className={css.forget}>忘记密码</div>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className={css.button}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </Layout>
    );
}
